<template>
    <div class="div_canvas_container">
        
          <div class="btndiv">
            <button style="left:26%" slot="right" @click="handelClearEl" type="danger" class="signbtn">清除</button>
          <button style="left:53%" slot="right" @click="saveImage" type="danger" class="signbtn">保存</button>
        </div>
       
              <canvas id="signCanvas"></canvas>     
    </div>
</template>


<script>
export default {
    //数字签名
    name : 'digitaSign',
    data() {
        return{
            
        }
    },
    mounted() {
        let vm = this;
        // vm.digitaSignType = vm.$route.query.type;
        this.$nextTick(()=>{
          setTimeout(() => {
              vm.initCanvas()
            },100)
        })
 
    },
    methods: {
        initCanvas(){
            let rate2 = 1;
            let oCanvas = document.getElementById("signCanvas");
            oCanvas.width = oCanvas.offsetWidth*rate2;
            var header=document.getElementsByClassName('btndiv')[0].offsetHeight;
            console.log('header :'+header)
            oCanvas.height = document.getElementsByClassName('div_canvas_container')[0].offsetHeight*rate2-header;
            console.log('oc height:'+oCanvas.height)
            let cxt = oCanvas.getContext("2d");
            cxt.fillStyle = 'rgba(255, 255, 255, 1)';
            // cxt.globalAlpha=1;

            cxt.fillRect(0, 0, oCanvas.width, oCanvas.height);
            cxt.lineWidth = 2*rate2;
            cxt.strokeStyle="#ff6000"; 
            let posX = 0; //x坐标
            let posY = 0; //y坐标
            let position = null;
            let parentPosintin = window.innerHeight*0.55;
 
            //手指触摸屏幕可记录此时的位置作为起点
            oCanvas.addEventListener("touchstart", function(event) {
            
              posX = event.changedTouches[0].clientX;
              posY = event.changedTouches[0].clientY - parentPosintin -50;
              // console.log('clienty:'+event.changedTouches[0].clientY)
              // console.log('parent position:'+parentPosintin)
              // console.log('posy:'+posY)
              cxt.beginPath();
              cxt.moveTo(posX*rate2, posY*rate2);
              
            });
            //手指屏滑动画线
            oCanvas.addEventListener("touchmove", function(event) {
              optimizedMove(event);
            });
            let requestAnimationFrame = window.requestAnimationFrame;
            let optimizedMove = requestAnimationFrame ? function(e){
              requestAnimationFrame(function(){
                move(e);
              });
            } : move;
            function move(event){
              posX = event.changedTouches[0].clientX  + 0.5;
              posY = event.changedTouches[0].clientY - parentPosintin -50
              cxt.lineTo(posX*rate2, posY*rate2);
              cxt.stroke();
              // console.log("画笔的Y坐标"+posY*rate2);
            }
        },
        // 清除画板
        handelClearEl() {
          console.log('ok1')
          let oCanvas = document.getElementById("signCanvas");
          let cxt = oCanvas.getContext("2d");
          cxt.clearRect(0, 0, oCanvas.width, oCanvas.height);


                cxt.fillStyle = 'rgba(255, 255, 255, 1)';
            // cxt.globalAlpha=1;
            cxt.fillRect(0, 0, oCanvas.width, oCanvas.height);
            // cxt.lineWidth = 2*rate2;
            // cxt.strokeStyle="#ff6000";
  console.log('ok2')
        },
        //保存为图片
        saveImage() {
            let oCanvas = document.getElementById("signCanvas");
            let imgBase64 = oCanvas.toDataURL();
            this.$emit("getimgsrc",imgBase64);
            
            
        }
    }
}
</script>

<style lang="scss">

    .div_canvas_container {
				// margin-top: 1.35rem;
        text-align: center;
				width: 100%;
				height: 100%;
        overflow: hidden;
  
		}
    .btndiv{
      height: 50px;
      position:relative;

    }
    .signbtn{
          height: 30px;
    //font-size: 0.283976rem;
    width: 60px;
    border-radius: 5px;
    border: none;
    background: blue;
    background-color: cornflowerblue;
    color: #fff;
    position: absolute;
    // bottom: 15px;
        top: 50%;
    transform: translateY(-50%);
    }
      #signCanvas{
				width: 100%;
				// height: 100%;
				background: #fff;
				border: none;
        box-sizing: border-box;
        overflow: hidden;
        
			}
</style>
